import QtQuick 2.2
import QtQuick.Window 2.1

Window {
    visible: true;
    width: 1500;
    height: 900;

    Rectangle {
        anchors.fill: parent;
        gradient: Gradient{
            GradientStop {
                position: 0.0;
                color: "skyblue";
            }

            GradientStop {
                position: 1.0;
                color: "lightskyblue";
            }
        }

        TextInput {
            anchors.centerIn: parent;

            width: 400;
            height: 50;
            font.pixelSize: 40;
            color: "white";
            focus: true;

            onAccepted: {
                t.text = "input accepted";
            }
        }

        Rectangle {
            anchors.centerIn: parent;
            width: 400;
            height: 50;
            color: "white";
            border {
                color: "black";
            }

            TextInput {
                anchors.fill: parent;
                anchors.topMargin: 10;
                anchors.leftMargin: 10;

                //字体大小用了动态属性绑定
                font.pixelSize: parent.height - this.anchors.topMargin * 2;
                focus: true;
                //echoMode, 有Nomal, Password, NoEcho, PasswordEchoOnEdit
                echoMode: TextInput.Password;
                //限制输入字符长度，中英文无差别
                maximumLength: 5;

                onAccepted: {
                    //contentWidth,显示当前文本框内字符串宽度（注意不是长度）
                    console.log("done! contentWidth:" + this.contentWidth);
                    t.text = "done!";
                }

                Component.onCompleted: {
                    console.log(this.font.pixelSize);
                    console.log("contentWidth: " + this.contentWidth);
                    console.log("contentHeight" + this.contentHeight);
                }
            }
        }

        Text {
            id: t;
            anchors.bottom: parent.bottom;
            anchors.horizontalCenter: parent.horizontalCenter;

        }
    }
}
